<div class="ten-process career-join">
    <div class="{% unless section.settings.full_width %}page-width{% endunless %}">
        {%- if section.settings.heading != blank -%}
         <div class="process-title">
          <div class="title">
            {{ section.settings.heading | escape }}
         </div> 
            {%- if section.settings.text != blank -%}
                <div class="rte">{{ section.settings.text }}</div>
            {%- endif -%}
         </div> 
       {%- endif -%}

       <div class="mb-img image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
       {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
     >
     {%- if section.settings.image != blank -%}
     <img
     srcset="{%- if section.settings.image.width >= 275 -%}{{ section.settings.image | img_url: '275x' }} 275w,{%- endif -%}
       {%- if section.settings.image.width >= 550 -%}{{ section.settings.image | img_url: '550x' }} 550w,{%- endif -%}
       {%- if section.settings.image.width >= 710 -%}{{ section.settings.image | img_url: '710x' }} 710w,{%- endif -%}
       {%- if section.settings.image.width >= 1420 -%}{{ section.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
       {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
       data-src="{{ section.settings.image | img_url: '550x' }}"
     sizes="(min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %},
       (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %},
       calc(100vw - 30px)"
     alt="{{ section.settings.image.alt }}"
     class="lazyload"
     height="{{ section.settings.image.height }}"
     width="{{ section.settings.image.width }}"
     loading="lazy"
   >
     {%- else -%}
     {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
   {%- endif -%}
      </div>

      <div class="we_are">
        {%- for block in section.blocks -%}
        {% case block.type %}
        {%- when 'text' -%}
        <div class="we-text" {{ block.shopify_attributes }}>
            {%- if block.settings.title != blank -%}
                <h3>{{ block.settings.title }}</h3>
           {%- endif -%}

           {%- if block.settings.richtext1 != blank -%}
          <div class="we-richtext">
            <div class="richtext left">
                {{ block.settings.richtext1 }}
            </div>
            {%- if block.settings.richtext2 != blank -%}
            <div class="richtext right">
              {{ block.settings.richtext2 }}
            </div>
            {%- endif -%}
          </div>
          {%- endif -%}

        </div>

        {%- when 'image' -%}
        <div class="we-image grid" {{ block.shopify_attributes }}>
           <div class="image-left grid__item">

            <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
            {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
          >
          {%- if block.settings.image != blank -%}
          <img
          srcset="{%- if block.settings.image.width >= 275 -%}{{ block.settings.image | img_url: '275x' }} 275w,{%- endif -%}
            {%- if block.settings.image.width >= 550 -%}{{ block.settings.image | img_url: '550x' }} 550w,{%- endif -%}
            {%- if block.settings.image.width >= 710 -%}{{ block.settings.image | img_url: '710x' }} 710w,{%- endif -%}
            {%- if block.settings.image.width >= 1420 -%}{{ block.settings.image | img_url: '1420x' }} 1420w,{%- endif -%}
            {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
          src="{{ block.settings.image | img_url: '550x' }}"
          sizes="(min-width: 990px) {% if block.blocks.size <= 2 %}710px{% else %}550px{% endif %},
            (min-width: 750px) {% if block.blocks.size == 1 %}710px{% else %}550px{% endif %},
            calc(100vw - 30px)"
          alt="{{ block.settings.image.alt }}"
          height="{{ block.settings.image.height }}"
          width="{{ block.settings.image.width }}"
          loading="lazy"
        >
          {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
           </div>
           <div class="image-right grid__item">
            {%- if block.settings.title != blank -%}
             <h3>   {{ block.settings.title }}</h3>
            {%- endif -%}
            {%- if block.settings.text != blank -%}
            <div class="richtext left">
              {{ block.settings.text }}
            </div>
            {%- endif -%}
           </div>
        </div>
        {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
</div>

{% schema %}
{
  "name": "Career join",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
  {
    "type": "text",
    "id": "heading",
    "default": "Talk about your brand",
    "label": "Heading"
  },
  {
    "type": "richtext",
    "id": "text",
    "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
    "label": "Text"
  },
  {
    "type": "image_picker",
    "id": "image",
    "label": "Image"
  },
  {
    "type": "checkbox",
    "id": "full_width",
    "default": false,
    "label": "t:sections.rich-text.settings.full_width.label"
  }
  ],
  "blocks": [
  {
    "type": "text",
    "name": "text",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "richtext1",
        "label": "Des1"
      },
      {
        "type": "richtext",
        "id": "richtext2",
        "label": "Des2"
      }
    ]
  },
  {
    "type": "image",
    "name": "image",
    "settings": [
    {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Text"
      }
    ]
  }
  ],
  "presets": [
    {
      "name": "Career join"
    }
  ]
}
{% endschema %}
